import * as React from 'react'
import { cn } from '@/lib/utils'

export interface TooltipProps {
  children: React.ReactNode
  content: React.ReactNode
  className?: string
}

const Tooltip = ({ children, content, className }: TooltipProps) => {
  return (
    <div className={cn('relative inline-block', className)}>
      <div className="tooltip-trigger">{children}</div>
      <div className="absolute invisible opacity-0 transition-all duration-200 bg-black text-white text-xs rounded py-1 px-2 z-10 whitespace-nowrap bottom-full mb-1 left-1/2 transform -translate-x-1/2 tooltip-content">
        {content}
      </div>
      <style jsx>{`
        .tooltip-trigger:hover + .tooltip-content {
          visibility: visible;
          opacity: 1;
        }
      `}</style>
    </div>
  )
}

export { Tooltip }